h4, h5, h6,
h1, h2, h3 {margin: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
html, body{
  font-family: '微软雅黑';
   font-size: 100%;
   background:#fff; 
   overflow-x:hidden; 
}
a {
  text-decoration: none;
}
a:hover {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
}
/*--header start here--*/
.logo {
  float: left;
  width:400px;
  margin-left:50px;
}
.logo img{
  width:200px;
  height:70px;
}
.top-nav{
  float:left;
  width:60%;
  text-align:left;
  margin-top:1%;
}
.top-nav-right {
  float:right;
  width:15%;
}
.phone{
  margin-left:100px;
  line-height:25px;
}
#phone-ico{
  display: block;
  width:25px;
  height:25px;
  background:url(../images/phone.png);
  background-size:100%;
  float: left;
}
.logo h1 {
  font-size:3em;
  margin: 0em;
  font-family: '微软雅黑';
}
.logo h1 a{
  color:#0074FF;	
  display: block;
}
.logo h1 a:hover{
  text-decoration:none;
}
.header {
  background: #fff;
  border-bottom:2px solid #0074FF;
}
.header-main {
  padding: 1em 0em 5em 0em;
}
.res{
  background:url(../images/navbg.png)no-repeat;
  background-size:35% 100%;
  background-position:78%;
}
.top-nav ul {
  list-style: none;
  padding: 0.9em 0em 0em 0em;
}
.top-nav ul li {
  display: inline-block;
}
.top-nav ul li a{
  display: block;
	color: #666;
	text-decoration: none;
	font-size: 1.05em;
	padding:0em 1em;
	position:relative;
	z-index: 999;
}
.top-nav ul li a:hover,.top-nav ul li a.active{
	color:#0074FF;
}
.banner {
  min-height:800px;
}
.about {
  padding: 5em 0em 5em 0em;
}
.about-top {
  text-align: center;
  padding: 0em 0em 4em 0em;
}
.about-top h2 {
  font-size:3em;
  color:#0074FF;
  margin: 0em 0em 0.5em 0em;
  font-family: '微软雅黑';
}
.about-top p {
  font-size:1em;
  color: #888;
  line-height: 1.8em;
  width: 69%;
  margin: 0.5em auto 0em;
  text-indent:2em;
}
.about-grid p {
  font-size: 1em;
  color: #999;
  line-height: 1.8em;
  margin: 0.7em 0em 0em 0em;
}
.about-grid h3 {
  font-size: 1.5em;
  color: #444;
  text-align: center;
  margin: 0em 0em 0.8em 0em;
  font-family: '微软雅黑';
}
.about-grid h3:first-letter{
  font-size:1.5em;
  color:#0074FF;
}
.about-bottom img{
  width:400px;
  height:300px;
}
.about-bottom p{
  font-size:.9em;
  text-indent: 2em;
}
.why-us {
  padding: 5em 0em 5em 0em;
  background:#0074FF;
}
.why-us-left {
  text-align: right;
  margin: 3em 0em 0em 0em;
}
.why-us-left h3 {
  font-size: 3.5em;
  color:#FFFFFF;
  font-family: '微软雅黑';
}
.why-us-left h4 {
  font-size: 1.2em;
  color: #fff;
  line-height: 1.6em;
  margin: 1em 0em 1em 0em;
}
.why-us-left p {
  font-size: 0.95em;
  color: #F5F5F5;
  line-height: 1.9em;
}
.why-us-right {
  text-align: center;
}
.gallery {
  padding: 5em 0em 5em 0em;
}
.gallery-top {
  text-align: center;
  padding: 0em 0em 4em 0em;
}
.gallery-top h3 {
  font-size: 2.5em;
  color: #0074FF;
  margin-bottom: 0.2em;
  font-family: '微软雅黑';
}
.gallery-top p {
  font-size:1em;
  text-indent:2em;
  color: #777;
  line-height:1.8em;
  width: 60%;
  margin: 0 auto;
}
.project-eff{
  overflow:hidden;
	position:relative;
  border:2px solid #ccc;
  margin-bottom:10px;
}
.project-eff img{
  width:350px;
  height:550px;
}
.project-img{
  width:300px;
  height:380px;
  border:3px solid #555;
  overflow: hidden;
  cursor: pointer;
  position:relative;
  left:10%;
}
.project-img img{
  width:100%;
  position:absolute;
  top:0%;
  left:0%;
  transition: width 1s,height 1s;
}
.project-img:hover img{
  width:120%;
}
#contactimg{
  border:3px solid #333;
  width:30%;
  float: left;
  margin-left:150px;
}
.contact-pa{
  float: right;
  margin-right:50px;
}
.contact-pa h3{
  color:#0074FF;
}
.contact-dt{
  float: right;
  margin-right:0px;
  width:600px;
  height:400px;
  overflow: hidden;
}
.contact-dt img{
  width:100%;
  height:100%;
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  transition: width 2s,height 2s;
  cursor: pointer;
}
.contact-dt:hover img{
  width:150%;
  height:150%;
}
.footer{
  padding:4em;
  background:#333;
}
.ftr-grd h3 {
  font-size: 2em;
  color:#0074FF;
  margin: 0em 0em 0.6em 0em;
  font-family: '微软雅黑';
}
.ftr-grd p {
  font-size: 0.95em;
  font-weight: 400;
  color: #999;
  line-height:2em;
}
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom:10px;
	right:50px;
	overflow: hidden;
	width: 48px;
	height: 48px;
	border: none;
	text-indent: 100%;
	background: url(../images/top.png) no-repeat 0px 0px;
  background-size:100%;
}
@media(max-width:1440px){
}
@media(max-width:1366px){
.banner-bottom h3 {
  font-size: 3.5em;	
}
}
@media(max-width:1280px){
.banner {
  min-height: 670px;	
}
.banner-bottom {
  padding: 15em 0em 0em 0em;
}
}
@media(max-width:1024px){
.banner-bottom h3 {
  font-size: 3.5em;
}
.banner {
  min-height: 600px;
}
.banner-bottom {
  padding: 14em 0em 0em 0em;
}
.about {
  padding: 3em 0em 3em 0em;
}
.about-top h4 {
  font-size: 1.6em;
  width: 100%;
}
.about-top p {
  width: 93%;
}
.about-top h2 {
  margin: 0em 0em 0.25em 0em;
}
.why-us {
  padding: 3em 0em 3em 0em;
}
.why-us-left {
  margin: 2em 0em 0em 0em;
}
.why-us-left h4 {
  font-size: 1.05em;
}
.gallery {
  padding: 3em 0em 3em 0em;
}
}
@media(max-width:768px){
.banner {
  min-height: 430px;
}
.banner-bottom {
  padding: 9em 0em 0em 0em;
}
.banner-bottom h3 {
  font-size: 2.8em;
}
.about-top h2 {
  font-size: 2.8em;
}
.about-top h4 {
  font-size: 1.5em;
}
.about-grid {
  float: left;
  width: 33%;
  padding: 0px 10px 0px 0px;
}
.about-grid h3 {
  font-size: 1.3em;
  margin: 0em 0em 0.6em 0em;
}
.about-grid p {
  font-size: 0.85em;
}
.why-us-left {
  float: left;
  width: 65%;
}
.why-us-right {
  float: right;
  width: 31%;
}
.why-us-left h3 {
  font-size: 2.8em;
}
.gallery-top h3 {
  font-size: 2.8em;
}
.gallery-top p {
  width: 85%;
}
.gallery-grid {
  float: left;
  width: 33%;
}
#col-last{
  display: none;
}
.gallery-top {
  padding: 0em 0em 3em 0em;
}
.project-img{
  width:300px;
  height:380px;
  border:3px solid #555;
  overflow: hidden;
  cursor: pointer;
  position:relative;
  left:20%;
  top:10%;
}
#proimg2{
  opacity:0;
}
.project-img img{
  width:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  transition: width 1s,height 1s;
}
#contactimg{
  border:3px solid #333;
  width:30%;
  float: left;
  margin-left:0px;
}
.contact-pa{
  float:left;
  margin-left:0px;
}
.footer {
  padding: 2em 0em;
}
.ftr-grd {
  float: left;
  width: 33%;
}
.ftr-grd h3 {
  font-size: 1.7em;
}
.logo h1 {
  font-size: 2.5em;
}
.cl-effect-16 a::before {
  color: #000;
}
.feat-text h4 {
  font-size: 1.3em;
}
.why-us-right img {
  width: 100%;
}
}
@media(max-width:640px){
.about-grid h3 {
  font-size: 1em;	
}
.about-top h4 {
  font-size: 1.25em;
}
.banner {
  min-height: 370px;
}
.banner-bottom {
  padding: 7.5em 0em 0em 0em;
}
.banner-bottom h3 {
  font-size: 2.6em;
}
.why-us-left {
  margin: 1em 0em 0em 0em;
}
.why-us-left h4 {
  font-size: 0.95em;
  margin: 0.5em 0em 0.5em 0em;
}
.why-us-left p {
  font-size: 0.83em;
  line-height: 1.6em;
}
.why-us {
  padding: 2em 0em 2em 0em;
}
.ftr-grd ul li a span {
  margin: 0em 0.3em 0em 0em;
}
.ftr-grd h3 {
  font-size: 1.35em;
}
.ftr-grd p {
  font-size: 0.85em;
}
.gallery-grid {
  padding: 0px 10px 0px 0px;
}
.gallery-grid {
  padding: 0px 10px 0px 0px;
  margin: 0em 0em 0.8em 0em;
}
.about-grid h3 {
  font-size: 1.2em;
}
}
@media(max-width:480px){
.banner-bottom h3 {
  font-size: 1.85em;
}
.banner {
  min-height: 300px;
}
.banner-bottom {
  padding: 4em 0em 0em 0em;
}
.logo h1 {
  font-size: 2.2em;
}
.about {
  padding: 2em 0em 2em 0em;
}
.about-top h2 {
  font-size: 2.3em;
}
.about-top h4 {
  font-size: 1.1em;
}
.about-top p {
  width: 100%;
  font-size: 0.9em;
}
.about-grid {
  float: none;
  width: 100%;
  padding: 0px 0px 0px 0px;
}
.about-top {
  padding: 0em 0em 1.5em 0em;
}
.about-grid {
  padding: 0px 0px 15px 0px;
}
.why-us-left {
  float: none;
  width: 100%;
  padding:0px;
  margin: 0em 0em 1em 0em;
}
.why-us-right {
  float: none;
  width: 100%;
  padding:0px;
}
.why-us-right img {
  width: 30%;
}
.why-us-left h3 {
  font-size: 2.3em;
}
.banner-bottom {
  padding: 5.5em 0em 0em 0em;
}

span.glyphicon.glyphicon-cog {
  font-size: 1.5em;
}
span.glyphicon.glyphicon-erase {
  font-size: 1.5em;
}
span.glyphicon.glyphicon-film {
  font-size: 1.5em;
}
span.glyphicon.glyphicon-music {
  font-size: 1.5em;
}
span.glyphicon.glyphicon-picture{
  font-size: 1.5em;
}
span.glyphicon.glyphicon-print {
  font-size: 1.5em;
}
.gallery {
  padding: 2em 0em 2em 0em;
}
.gallery-top h3 {
  font-size: 2.3em;
}
.gallery-top p {
  width: 100%;
  font-size: 0.9em;
}
.gallery-top {
  padding: 0em 0em 2em 0em;
}
.gallery-grid {
  width: 50%;
}
.feat-text h4 {
  font-size: 1.1em;
  line-height: 1.3em;
}
.ftr-grd {
  float: none;
  width: 100%;
  padding: 0em 0em 1.5em 0em;
}
.copy-right {
  padding: 0.5em 0em 0em 0em;
}
.copy-right p {
  font-size: 0.9em;
}
}
@media(max-width:320px){
.logo {
  width: 60%;
}
.logo h1 {
  font-size: 1.7em;
}
.top-nav {
  width: 40%;
}
.header-main {
  padding: 0.6em 0em 0.6em 0em;
}
.banner {
  min-height: 230px;
}
.banner-bottom {
  padding: 4em 0em 0em 0em;
}
.about {
  padding: 1em 0em 0.5em 0em;
}
.about-top h2 {
  font-size: 2em;
}
.about-top h4 {
  font-size: 0.93em;
  margin: 0em auto 0em;
}
.about-top {
  padding: 0em 0em 1.1em 0em;
}
.about-grid h3 {
  font-size: 1.1em;
  margin: 0em 0em 0.3em 0em;
}
.why-us-left h3 {
  font-size: 2em;
}
.why-us {
  padding: 1em 0em 1em 0em;
}
.why-us-left h4 {
  font-size: 0.85em;
}
span.glyphicon.glyphicon-comment {
  font-size: 1.7em;
}
.testimony-right p {
  font-size: 0.8em;
}
.gallery-top h3 {
  font-size: 2em;
}
.gallery {
  padding: 1em 0em 1em 0em;
}
.gallery-top {
  padding: 0em 0em 1em 0em;
}
.feat-grid {
  float: none;
  width: 100%;
  padding: 0em;
  padding: 0em 0em 1em 0em;
}
.feats-bot1 {
  margin-bottom: 0em;
}
.footer {
  padding: 1em 0em;
}
.ftr-grd {
  padding: 0em 0em 1em 0em;
}
span.glyphicon.glyphicon-cog {
  font-size: 1em;
}
span.glyphicon.glyphicon-erase {
  font-size: 1em;
}
span.glyphicon.glyphicon-film {
  font-size: 1em;
}
span.glyphicon.glyphicon-music {
  font-size: 1em;
}
span.glyphicon.glyphicon-picture{
  font-size: 1em;
}
span.glyphicon.glyphicon-print {
  font-size: 1em;
}
}